<template>
  <tr class="product-row">
    <td>{{ product.id }}</td>
    <td>{{ product.prodName }}</td>
    <td>{{ product.prodPrice }} 元</td>
    <td>{{ product.prodCount }}</td>
    <td>{{ product.busName }}</td>
    <td class="description">{{ product.prodCaption }}</td>
    <td>
      <a-button type="link" @click="deleteProduct">删除</a-button>
    </td>
  </tr>
</template>

<script>
import { message } from 'ant-design-vue';
import request from '../../../util/request';

export default {
  name: 'ProductRow',
  props: {
    product: {
      type: Object,
      required: true,
    },
  },
  methods: {
    deleteProduct() {
      request.post('/product/delete', {
        prodid: this.product.id,
        role: 'admin'
      }).then(res => {
        if (res.data.flag === 'success') {
          message.success('删除成功');
          this.deleted();
        } else {
          message.error('删除失败');
        }
      }).catch(err => {
        message.error('删除失败：', err);
      });
    },
    deleted() {
      this.$emit('deleted');
    }
  },
};
</script>

<style scoped>
.product-row {
  background: rgba(50, 50, 50, 0.8);
  /* 暗色微透明背景 */
  transition: background 0.3s;
  /* 背景过渡效果 */
}

.product-row:hover {
  background: rgba(70, 70, 70, 0.9);
  /* 悬停时稍微加深透明度 */
}

.description {
  max-width: 200px;
  /* 设置最大宽度 */
  white-space: nowrap;
  /* 不换行 */
  overflow: hidden;
  /* 超出隐藏 */
  text-overflow: ellipsis;
  /* 使用省略号 */
}
</style>